<template>
	<view class="search-container">
		<!-- 搜索头部 -->
		<view class="search-head">
			<view class="back" @click="goBack"><image src="../../static/approval/back.png" mode=""></image></view>
			<view class="search-input">
				<view class="search-icon"><image src="../../static/approval/look.png" mode=""></image></view>
				<input type="text" placeholder="请输入" v-model="value" @input="searchValueApi" placeholder-style="font-size: 24upx" />
			</view>
			<view class="search-more" @click="search(value)">搜索</view>
		</view>
		<!-- 搜索内容 -->
		<view class="search-content" v-if="searchListApi.length > 0">
			<scroll-view scroll-y="true" class="search-value-box">
				<view class="search-value-item" v-for="(item, index) in searchListApi" :key="index">
					<text v-if="item.id == ''">{{ item.title }}</text>
					<text v-else @click="chooseItem(item)">{{ item.title ? item.title : item.realname }}</text>
				</view>
			</scroll-view>
		</view>
		<!-- 推荐区域 -->
		<view class="recommend-content common-content" v-if="userBindHotel.length > 0 && searchType == 'chooseHotel'">
			<view class="recommend-title common-title">已绑定酒店</view>
			<view class="recommend-value common-value">
				<text v-for="(item, index) in userBindHotel" :key="index" @click="search(item.title)">{{ item.title }}</text>
			</view>
		</view>
		<!-- 搜索历史 -->
		<view class="search-history common-content" v-if="searchHistory.length > 0">
			<view class="history-title">
				<view class="common-title">历史搜索</view>
				<image src="@/static/approval/delete.png" mode="" @click="deleteHistory"></image>
			</view>
			<view class="history-value common-value">
				<text v-for="(item, index) in searchHistory" :key="index" @click="search(item)">{{ item }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import request from '@/utils/sun.js';

export default {
	data() {
		return {
			value: '',
			searchType: '',
			// 用户已绑定的酒店
			userBindHotel: [],
			// 接口返回的搜索内容
			searchListApi: [],
			// 搜索历史
			searchHistory: [],
			// 人员列表
			userList: [],
			// 婚车列表
			carList: []
		};
	},
	onLoad(options) {
		// 获取用户已绑定的酒店
		// this.getUserBindHotel()
		if (options.type) {
			this.searchType = options.type;
		}
		this.getUserList();
		this.getCarList();
	},
	onShow() {
		// 获取用户搜索历史
		this.getUserSearchHistory();
	},
	methods: {
		// 获取用户搜索历史
		getUserSearchHistory() {
			let that = this;
			if (that.searchType == 'hotel') {
				uni.getStorage({
					key: 'searchHotelHistory',
					success(res) {
						that.searchHistory = res.data;
					},
					fail(e) {}
				});
			} else if (that.searchType == 'changeUser') {
				uni.getStorage({
					key: 'searchUserHistory',
					success(res) {
						that.searchHistory = res.data;
					},
					fail(e) {}
				});
			} else if (that.searchType == 'masterCar' || that.searchType == 'slaveCar') {
				uni.getStorage({
					key: 'searchCarHistory',
					success(res) {
						that.searchHistory = res.data;
					},
					fail(e) {}
				});
			}
		},

		// 获取用户列表
		getUserList() {
			let that = this;
			let url = '/api/audit.dictionary/condition';
			if (that.searchType == 'changeUser') {
				request.request({
					url: url,
					token: true,
					data: {},
					success(res) {
						if (res.code == 200) {
							if (res.data.userList.length > 0) {
								that.userList = res.data.userList;
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							});
						}
					},
					fail(e) {
						uni.showToast({
							icon: 'none',
							title: '请求失败，请稍后重试'
						});
					}
				});
			}
		},

		// 获取婚车列表
		getCarList() {
			let that = this;
			let url = '/api/dictionary.picker/car';
			if (that.searchType == 'masterCar' || that.searchType == 'slaveCar') {
				request.request({
					url: url,
					token: true,
					data: {},
					success(res) {
						if (res.code == 200) {
							if (res.data.carList.length > 0) {
								that.carList = res.data.carList;
							} else {
								uni.showToast({
									icon: 'none',
									title: '暂无婚车可选，请联系负责人添加'
								});
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							});
						}
					},
					fail(e) {
						uni.showToast({
							icon: 'none',
							title: '请求失败，请稍后重试'
						});
					}
				});
			}
		},

		searchValueApi() {
			let that = this;
			let query = {
				title: that.value
			};
			let url = '';
			if (that.searchType == 'hotel') {
				url = '/h5/dictionary.hotel/index';

				if (that.value) {
					setTimeout(function() {
						request.request({
							url: url,
							token: true,
							data: query,
							success(res) {
								if (res.code == 200) {
									if (res.data.hotelList.length > 0) {
										that.searchListApi = res.data.hotelList;
									} else {
										that.searchListApi = [];
										that.searchListApi.push({
											id: '',
											title: '未找到您搜索的内容'
										});
									}
								} else {
									uni.showToast({
										icon: 'none',
										title: res.msg
									});
								}
							},
							fail(e) {
								uni.showToast({
									icon: 'none',
									title: '请求失败，请稍后重试'
								});
							}
						});
					}, 1000);
				} else {
					that.searchListApi = [];
				}
			} else if (that.searchType == 'changeUser') {
				if (that.value) {
					let userList = that.userList;
					let value = that.value;
					for (let i = 0; i < userList.length; i++) {
						if (userList[i].realname.indexOf(value) >= 0) {
							that.searchListApi.push(userList[i]);
						}
					}
					if (that.searchListApi.length == 0) {
						that.searchListApi.push({
							id: '',
							title: '未找到您搜索的内容'
						});
					}
				} else {
					that.searchListApi = [];
				}
			} else if (that.searchType == 'masterCar' || that.searchType == 'slaveCar') {
				if (that.value) {
					let carList = that.carList;
					let value = that.value;
					for (let i = 0; i < carList.length; i++) {
						if (carList[i].title.indexOf(value) >= 0) {
							that.searchListApi.push(carList[i]);
						}
					}
					if (that.searchListApi.length == 0) {
						that.searchListApi.push({
							id: '',
							title: '未找到您搜索的内容'
						});
					}
				} else {
					that.searchListApi = [];
				}
			}
		},
		// 搜索
		search(value) {
			let that = this;
			that.value = value;
			that.searchValueApi();
			if (value) {
				let index = that.searchHistory.indexOf(value);
				if (index != -1) {
					that.searchHistory.splice(index, 1);
				}
				if (that.searchHistory.length == 5) {
					that.searchHistory.pop();
					that.searchHistory.unshift(value);
				} else {
					that.searchHistory.unshift(value);
				}
				
				if (that.searchType == 'hotel') {
					uni.setStorage({
						key: 'searchHotelHistory',
						data: that.searchHistory
					});
				} else if (that.searchType == 'changeUser') {
					uni.setStorage({
						key: 'searchUserHistory',
						data: that.searchHistory
					});
				} else if (that.searchType == 'masterCar' || that.searchType == 'slaveCar') {
					uni.setStorage({
						key: 'searchCarHistory',
						data: that.searchHistory
					});
				}
			} else {
				that.searchListApi = [];
			}
		},
		// 清除历史搜索
		deleteHistory() {
			this.searchHistory = [];
			if (this.searchType == 'hotel') {
				uni.removeStorage({
					key: 'searchHotelHistory'
				});
			} else if (this.searchType == 'changeUser') {
				uni.removeStorage({
					key: 'searchUserHistory'
				});
			} else if (that.searchType == 'masterCar' || that.searchType == 'slaveCar') {
				uni.removeStorage({
					key: 'searchCarHistory'
				});
			}
		},
		// 选择返回
		chooseItem(data) {
			console.log(data);
			let that = this;
			that.value = data.title ? data.title : data.realname;
			let pages = getCurrentPages();
			let currentPage = pages[pages.length - 1]; // 当前页面
			let prevPage = pages[pages.length - 2]; // 上一个页面
			if (that.searchType == 'hotel') {
				prevPage._data.order.hotel = data.title;
				prevPage._data.orderParams.hotel_id = data.id;
				if (prevPage.getHotelHallList) {
					prevPage.getHotelHallList(data.id);
				}
			} else if (that.searchType == 'changeUser') {
				prevPage._data.transferForm.realname = data.realname;
				prevPage._data.transferForm.user_id = data.id;
			} else if (that.searchType == 'masterCar') {
				prevPage._data.addCarItem.car_text = data.title;
				prevPage._data.addCarItem.car_id = data.id;
			} else if (that.searchType == 'slaveCar') {
				prevPage._data.addCarItem.slave_car_text = data.title;
				prevPage._data.addCarItem.slave_car_id = data.id;
			}

			that.searchListApi = [];
			uni.navigateBack({});
			that.search(data.title);
		},
		// 返回上一页
		goBack() {
			uni.navigateBack({});
		}
	}
};
</script>

<style lang="less">
uni-page-body {
	padding-top: 0;
}

.search-container {
	padding: 24upx;

	.search-head {
		display: flex;
		align-items: center;

		.back {
			margin-right: 16upx;
			width: 40upx;
			height: 40upx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.search-input {
			position: relative;
			padding-left: 32upx;
			flex: 1;
			display: flex;
			align-items: center;
			height: 60upx;
			background-color: #f1f1f1;
			border-radius: 15px;

			.search-icon {
				width: 28upx;
				height: 28upx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			input {
				padding-left: 32upx;
				flex: 1;
				height: 100%;
				font-size: 28upx;
			}
		}

		.search-more {
			flex: 0 10%;
			margin-left: 24upx;
			font-size: 24upx;
		}
	}

	.search-history {
		.history-title {
			display: flex;

			.common-title {
				flex: 1;
			}

			image {
				width: 30upx;
				height: 30upx;
			}
		}
	}

	.search-content {
		position: absolute;
		top: 7%;
		padding: 20upx;
		width: 90%;
		height: 90%;
		overflow: auto;
		background-color: #ffffff;
		z-index: 10;

		.search-value-box {
			font-size: 28upx;
			color: #818181;

			.search-value-item {
				padding: 20upx 0;
				border-bottom: 1upx solid #f0f0f0;
			}
		}
	}

	// 公有样式
	.common-content {
		padding-top: 38upx;
		font-size: 24upx;

		.common-title {
			font-weight: 600;
		}

		.common-value {
			padding-top: 24upx;
			line-height: 1.5rem;

			text {
				padding: 8upx 24upx;
				background-color: rgba(248, 248, 248, 1);
				border-radius: 15px;
			}
		}
	}
}
</style>
